<template>
  <div class="import-excel-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card>
        <!-- 警告提示语 -->
        <el-alert type="warning">
          <i class="el-icon-info"></i>
          <span
            >每次导入仅可添加1000名员工，姓名、手机、入职时间、聘用形式为必填项</span
          >
        </el-alert>
        <!-- 上传组件 -->
        <!-- 
          这个上传 Excel 的组件提供了两个入口(props)：
           1. 上传前的校验（校验文件的大小或类型等）
           2. 上传成功给到我们的数据
              也就是解析后的表格数据，包含2部分：
              （1） 表头（数组格式）
               (2) 表体（数据格式）
         -->
        <upload-excel :before-upload="onBeforeUpload" :on-success="onSuccess" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { postEmployeeBatchAPI } from "@/api/employees";
export default {
  name: "ImportExcel",
  methods: {
    // 处理上传前的校验
    onBeforeUpload(file) {
      // 单位是：B -> 字节
      // 1B = 8位
      // 1KB = 1024B
      // 1MB = 1024KB
      // 1GB = 1024MB
      const isLT1M = file.size / 1024 / 1024;
      // 文件大小不能超过1M
      if (isLT1M >= 1) {
        this.$message.warning("文件大小不能超过1M");
        // 校验失败
        return false;
      }
      return true;
    },
    // 格式化Excel日期的方法（就是把天数转换为年月日）
    formatExcelDate(numb, format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1); // 毫秒
      time.setYear(time.getFullYear() - 70);
      const year = time.getFullYear() + "";
      const month = time.getMonth() + 1 + "";
      const date = time.getDate() - 1 + "";
      if (format && format.length === 1) {
        return (
          year +
          format +
          (month < 10 ? "0" + month : month) +
          format +
          (date < 10 ? "0" + date : date)
        );
      }
      return (
        year +
        (month < 10 ? "0" + month : month) +
        (date < 10 ? "0" + date : date)
      );
    },
    // 处理上传成功
    onSuccess({ results }) {
      console.log(results);
      // header：表头数组
      // results： 对象数组，不能直接使用，
      // 原因的对象中的键是中文，需要把中文转为英文的键
      // 解决：对象关系映射
      // 处理处理
      let arr = this.handleResults(results);
      // 把arr中每个对象和日期相关的值做个转换
      arr = arr.map((item) => {
        return {
          ...item,
          timeOfEntry: this.formatExcelDate(item.timeOfEntry, "-"),
          correctionTime: this.formatExcelDate(item.correctionTime, "-"),
        };
      });
      // 批量上传
      this.postEmployeeBatch(arr);
    },
    // 批量上传
    async postEmployeeBatch(arr) {
      // 发请批量上传请求
      await postEmployeeBatchAPI(arr);
      // 成功提示
      this.$message.success("批量新增员工成功");
      // 跳回至员工页
      this.$router.push("/employees");
    },
    // 处理表体结果的对象数组
    handleResults(results) {
      // 中英文键的映射关系
      const userRelations = {
        入职日期: "timeOfEntry",
        手机号: "mobile",
        姓名: "username",
        转正日期: "correctionTime",
        工号: "workNumber",
      };
      // 装结果的数组
      const arr = [];
      // 遍历数组
      for (let i = 0; i < results.length; i++) {
        const obj = {};
        // 依次取出每个对象，遍历，做键的映射
        for (const key in results[i]) {
          // 取出英文键
          const enKey = userRelations[key];
          // 把英文key和results[i][key]的值填入到obj中
          obj[enKey] = results[i][key];
        }
        // 把每次处理完毕的对象，push到arr数组中
        arr.push(obj);
      }
      // 返回结果数组
      return arr;
    },
  },
};
</script>

<style scoped>
.el-card {
  min-height: 85vh;
}
</style>
